<template>
  <van-cell-group>
    <van-cell style="text-align: left;line-height: 1">
      <template #title>
        <p>患者姓名：{{ information.pname }}</p>
        <p>联系电话：{{ information.telNumber }}</p>
      </template>
      <template #value>
        <div>挂号费用：<a style="color:rgba(255,128,0,0.8);font-size: 1.4em">{{ information.serviceFee }}元</a></div>
      </template>
    </van-cell>
    <van-cell style="text-align: left;line-height: 1">
      <template #title>
        <p>医生：{{ information.doctorName }}</p>
        <p>出诊级别：{{ information.doctorLabel }}</p>
      </template>
    </van-cell>
    <van-cell style="text-align: left;line-height: 1">
      <template #title>
        <p>就诊科室：<a style="color: red;">{{ information.department }}</a></p>
        <p>就诊地点：<a style="color: red;">{{ information.departmentAddress }}</a></p>
        <p>就诊日期：{{ information.appointmentTime }}</p>
      </template>
    </van-cell>
    <van-cell>
      <div class="code-container">
        <svg id="barcode"></svg>
      </div>
    </van-cell>
    <van-cell>
      <div class="code-container">
        <img :src="qrcodeData" alt="QR Code">
      </div>
    </van-cell>
  </van-cell-group>

</template>
<script setup>
import {onMounted, ref} from "vue";
import JsBarcode from 'jsbarcode'
import jrQrcode from "jr-qrcode"
import {AppointmentService} from "@/api/api";

const qrcodeData = ref('');
const appointmentId = ref(-1);
onMounted(async () => {
  console.log(history.state.appointmentId);
  appointmentId.value = history.state.appointmentId;

  if (appointmentId.value !== undefined)
    await loadData(); // 在页面加载完成后调用加载数据的方法

  // 在页面加载完成后自动调用生成条形码的方法
  generateBarcode(information.value.appointmentNumber);
  generateQRCode(information.value.appointmentNumber)
});
async function loadData() {
  // 加载数据
  try {
    if(appointmentId.value === -1)
      return;
    const response = await AppointmentService.getPatientDetail(appointmentId.value);
    // 获取响应数据
    information.value = response.data;
  } catch (error) {
    console.error(error); // 处理错误
  }
}

const information = ref({
  pname: "曹锦琦",
  telNumber: "13588888888",
  doctorName: "匡科利",
  doctorLabel: "护士",
  department: "红角洲耳鼻咽喉头颈外科门诊",
  departmentAddress: "红角洲院区三楼D3诊区",
  appointmentTime: "2023-12-04 14:00-14:30",
  appointmentNumber: "5890448454324",
  serviceFee: 100.00
}); // 存储病人数据的响应式数组

const generateBarcode = (receiptOrder) => {
  JsBarcode('#barcode', receiptOrder, {
    height: 70,
    format: 'CODE128',
    text: ' ',
    displayValue: true,
    textPosition: 'bottom'
  });
};

const generateQRCode = (receiptOrder) => {
  qrcodeData.value = jrQrcode.getQrBase64(receiptOrder, {
    padding       : 10,   // 二维码四边空白（默认为10px）
    width         : 200,  // 二维码图片宽度（默认为256px）
    height        : 200,  // 二维码图片高度（默认为256px）
    reverse       : false,        // 反色二维码，二维码颜色为上层容器的背景颜色
    background    : "#ffffff",    // 二维码背景颜色（默认白色）
    foreground    : "#000000"     // 二维码颜色（默认黑色）
  });
};

</script>

<style scoped>
.code-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
</style>